<template>
  <div>
    <action-sheet 
    v-model="show" 
    :title="'点评'+name"
    @close="handelClose" 
    @open="handelOpen">
        <div class="iconfont returnBtn" v-if="active == 0 && !praisea.redactIcon ? true : false" @click="handelReturn(0)">&#xe612;</div>
        <div class="iconfont returnBtn" v-if="active == 1 && !criticism.redactIcon ? true : false" @click="handelReturn(1)">&#xe612;</div>
        <Tabs 
        v-model="active" 
        :swipeable="true"
        :border="true"
        color="#128FEF"
        title-inactive-color="#999"
        title-active-color="#128FEF">
            <Tab title="表扬">
                <ul class="items praiseItems">
                    <li class="item" v-show="praisea.addIcon" @click="handelAddPraise">
                        <div class="imgBox"><img src="../images/comment-icon2.png"></div>
                        <div class="name">增加</div>
                    </li>
                    <li class="item" v-show="praisea.delIcon" @click="handelDelPraise">
                        <div class="imgBox"><img src="../images/comment-icon3.png"></div>
                        <div class="name">删除</div>
                    </li>

                    <li class="item" v-for="(item,index) of praisea.list" :key="index" @click="handelStudentEvaluate(item)">
                        <div class="imgBox">
                            <VanImage
                            round
                            width="1rem"
                            height="1rem"
                            :src="item.imgUrl"
                            />
                            <div class="number" style="background: #128FEF">{{item.score}}</div>
                        </div>
                        <div class="name">{{item.name}}</div>
                    </li>

                    <li class="item" v-show="praisea.redactIcon" @click="handelRedact(0)">
                        <div class="imgBox"><img src="../images/comment-icon1.png"></div>
                        <div class="name">编辑</div>
                    </li>
                </ul>
            </Tab>
            <Tab title="批评">
                <ul class="items">
                    <li class="item" v-show="criticism.addIcon" @click="handelAddPraise">
                        <div class="imgBox"><img src="../images/comment-icon2.png"></div>
                        <div class="name">增加</div>
                    </li>
                    <li class="item" v-show="criticism.delIcon" @click="handelDelCriticism">
                        <div class="imgBox"><img src="../images/comment-icon3.png"></div>
                        <div class="name">删除</div>
                    </li>
                    <li class="item" v-for="(item,index) of criticism.list" :key="index" @click="handelStudentEvaluate(item)">
                        <div class="imgBox">
                            <VanImage
                            round
                            width="1rem"
                            height="1rem"
                            :src="item.imgUrl"
                            />
                            <div class="number">{{item.score}}</div>
                        </div>
                        <div class="name">{{item.name}}</div>
                    </li>
                    <li class="item" v-show="criticism.redactIcon" @click="handelRedact(1)">
                        <div class="imgBox"><img src="../images/comment-icon1.png"></div>
                        <div class="name">编辑</div>
                    </li>
                </ul>
            </Tab>
        </Tabs>
        <div class="buttonBox" v-show="isBtn">
            <div class="item" :class="currentPage == 1 ? 'item2': ''" @click="openTextModal">
                <span class="iconfont">&#xe613;</span>
                文字点评
            </div>
            <div 
                class="item"
                v-show="currentPage == 1 ? false : true"
                v-if="!isAllStudent" 
                @click="openStudentRecord" 
            >
                <span class="iconfont">&#xe622;</span>
                学生档案
            </div>
            <div 
                class="item" 
                v-show="isAllStudent"
                @click="openScoreInfo"
            >
                <span class="iconfont">&#xe622;</span>
                班级报表
            </div>
        </div>
    </action-sheet>
  </div>
</template>

<script>
import { ActionSheet,Tab,Tabs,Image as VanImage,Toast } from 'vant';
import { setTimeout } from 'timers';
export default {
    name:'evaluateModal',
    components:{
        ActionSheet,
        Tab, 
        Tabs,
        VanImage,
        Toast
    },
    data(){
        return {
            title:'',
            show:false,
            active: 0,
            returnIcon:false,
            isBtn:true,
            praisea:{
                addIcon:false,
                delIcon:false,
                redactIcon:true,
                list:[]
            },
            criticism:{
                addIcon:false,
                delIcon:false,
                redactIcon:true,
                list:[]
            }
        }
    },
    computed:{
        currentPage(){
            return this.$store.state.studentAppraise.currentPage;
        },
        name(){
            return this.$store.state.studentAppraise.studentsInfo.name;
        },
        isAllStudent(){
            return this.$store.state.studentAppraise.isAllStudent;
        },
        classItem(){
            return this.$store.state.studentAppraise.classItem
        }
    },
    watch:{
        active(){
            if(this.active == 0){
                this.stateCut(this.praisea.redactIcon)
            }
            if(this.active == 1){
                this.stateCut(this.criticism.redactIcon)
            }
        },
        'praisea.redactIcon'(){
            this.stateCut(this.praisea.redactIcon)
        },
        'criticism.redactIcon'(){
            this.stateCut(this.criticism.redactIcon)
        }
    },
    methods:{
        //得分明细页
        openScoreInfo(){
            this.$router.push('/studentAppraise/scoreInfo')
        },
        handelClose(){
            //this.handelInitialize();
            this.show = false;
            this.$store.commit('studentAppraise/setCurrentPage',0)
        },
        handelOpen() {
            this.show = true;
        },
        //状态切换
        stateCut(obj){
            if(obj){
                this.title = this.title;
                this.isBtn = true;
            }else{
                this.title = '';
                this.isBtn = false;
            }
        },
        //学生档案
        openStudentRecord(){
            this.$router.push('/studentAppraise/studentRecord')
        },
        //文字点评
        openTextModal(){
            this.show = false;
            this.$emit('openTextModal')
        },
        //初始化
        handelInitialize(){
            this.active = 0;
            this.returnIcon = false;
            let praisea = {
                addIcon:false,
                delIcon:false,
                redactIcon:true,
                list:[]
            };
            let criticism = {
                addIcon:false,
                delIcon:false,
                redactIcon:true,
                list:[]
            };
            this.praisea = praisea;
            this.criticism = criticism;
        },
        //返回
        handelReturn(val){
            if(val == 0){
                this.praisea.addIcon = false;
                this.praisea.delIcon = false;
                this.praisea.redactIcon = true;
            }else if(val == 1){
                this.criticism.addIcon = false;
                this.criticism.delIcon = false;
                this.criticism.redactIcon = true;
            }
        },
        //编辑
        handelRedact(val){
            if(val == 0){
                this.praisea.addIcon = true;
                this.praisea.delIcon = true;
                this.praisea.redactIcon = false;
                this.$store.commit('studentAppraise/setEvaluateType',1);
            }else if(val == 1){
                this.criticism.addIcon = true;
                this.criticism.delIcon = true;
                this.criticism.redactIcon = false;
                this.$store.commit('studentAppraise/setEvaluateType',2);
            }
        },
        //添加
        handelAddPraise(){
            if(this.active == 0){
                if(this.praisea.list.length > 9){
                    return Toast('添加表扬不能超过10个')
                }
            }
            if(this.active == 1){
                if(this.criticism.list.length > 9){
                    return Toast('添加批评不能超过10个')
                }
            }
            this.$store.commit('studentAppraise/setAddPraiseImgUrl','');
            this.$router.push('/studentAppraise/addPraise')
        },
        //删除表扬
        handelDelPraise(){
            this.$router.push('/studentAppraise/delPraise')
        },
        //删除批评
        handelDelCriticism(){
            this.$router.push('/studentAppraise/delCriticism')
        },
        //获取点评数据
        getStudentsReviewType(){
            this.praisea.list = [];
            this.criticism.list = [];
            const params = {
                leaveCode:2,
                isAll:false,
                classId:this.classItem.classId
            }
            this.$store.dispatch('studentAppraise/GetStudentsReviewType',params).then(res=>{
                if(res.status == 200){
                    let list = res.data;
                    list.forEach(item=>{
                        if(item.type == 1){
                            this.praisea.list.push(item)
                        }else{
                            this.criticism.list.push(item)
                        }
                    })
                }
            })
        },
        //学生评价
        handelStudentEvaluate(item){
            this.$store.state.studentAppraise.evaluateInfo = item;
            //编辑
            if(!this.praisea.redactIcon && this.active == 0){
               return this.$router.push('/studentAppraise/setPraise')
            }
            if(!this.criticism.redactIcon && this.active == 1){
                return this.$router.push('/studentAppraise/setPraise')
            }
            //评价
            this.$store.dispatch('studentAppraise/PostStudentReview',null).then(res=>{
                Toast('评价成功');
                this.show = false;
                this.$emit('handelRefreshList')
            })
        }
    },
    activated(){
        this.getStudentsReviewType()
    }
}
</script>

<style lang="less" scoped>
 @import url('../../../assets/css/iconfont.css');
.returnBtn{
    width: 0.83rem;
    height: 0.83rem;
    position: absolute;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.32rem;
    color: #999;
}
.items{
    display: flex;
    flex-wrap:wrap;
    padding-bottom: 0.35rem;
    height: 5.2rem;
    overflow: hidden;
    overflow-y: auto;
    .item{
        width: 33.33%;
        height: 1.4rem;
        text-align: center;
        position: relative;
        margin-top: 0.35rem;
        .imgBox{
            width:1rem;
            height:1rem;
            margin:0 auto;
            position:relative;
            img{
                width:100%;
                height:100%;
                object-fit: cover;
            }
            .number{
                position: absolute;
                top: 0;
                right: 0;
                background-color: #c33;
                border-radius: 0.32rem;
                color: #fff;
                display: inline-block;
                font-size: 0.22rem;
                line-height: 0.32rem;
                padding: 0 0.1rem;
                text-align: center;
                white-space: nowrap;
                border: 0.02rem solid #fff;
            }
        }
        .name{
            font-size: 0.24rem;
            margin-top: 0.08rem;
        }
    }
}
.buttonBox{
    display:flex;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    font-size:0.24rem;
    color:#666;
    border-top:0.01rem solid #f5f5f5;
    .item{
        width:50%;
        box-sizing: border-box;
        border-left:0.01rem solid #f5f5f5;
    }
    .item2{
        width:100%;
    }
}
</style>

